import React, {useEffect, useState} from 'react';
import {Table} from "antd";
import {useAppDispatch} from "@/hooks";
import {getFindByParentIdAsync, useSelectorDict} from "@/store/slice/dict";

function Dict() {
    const dispatch = useAppDispatch();
    const {dictList,loading} = useSelectorDict();
    useEffect(()=>{
        dispatch(getFindByParentIdAsync(1));
    },[])

    // 扩开数据需要满足条件：dataSource所指定的数据中的元素（对象）需要拥有children属性，值为数组
    return (
        <div>
            <Table
                loading={loading}
                columns={[
                    {
                        title:"名称",// 表格列的标头
                        dataIndex:"name",// 会将dataSource数组中元素（对象）的name属性输出
                    },{
                        title:"编码",
                        dataIndex:"dictCode"
                    },{
                        title:"值",
                        dataIndex:"value"
                    },{
                        title:"创建时间",
                        dataIndex:"createTime"
                    }
                ]}
                // 不显示分页
                pagination={false}
                // 唯一标识
                rowKey={"id"}
                // 数据数组
                dataSource={dictList}
                // 配置展开属性
                expandable = {{
                    onExpand(expanded, record){
                        // expanded:是布尔值，true 点开，false 折叠
                        // record:行信息
                        // console.log(expanded,record)
                        if(expanded){
                            dispatch(getFindByParentIdAsync(record.id));
                        }
                    }
                }}
            ></Table>
        </div>
    );
}

export default Dict;